<template>
    <table class="my-table">
        <thead>
            <tr >
                <slot name="header">
                </slot>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in data" :key="index">
                <slot name="body" :item="item" >
                </slot>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    name: "MyTable",
    props:['data'],
    data() {
        return {

        }
    }

}
</script>


<style scoped>
.my-table {
    border-collapse: collapse;
    width: 100%;
}

.my-table td,
.my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.my-table th {
    background-color: #f2f2f2;
}
</style>